<!--
    This Source Code Form is subject to the terms of the Mozilla Public
    License, v. 2.0. If a copy of the MPL was not distributed with this
    file, You can obtain one at http://mozilla.org/MPL/2.0/.
-->

<!--
    Copyright (c) 2014, Joyent, Inc.
-->

<div class="page" id="page-provision">
    <div class="page-header">
        <h1>Provision a Virtual Machine</h1>
    </div>
    <form role="form" class="form-horizontal col-md-12">
        <div class="alert alert-danger validation-errors">
            <strong>There was a problem provisioning this VM because: </strong> <span class="message"></span>
        </div>

        <div class="form-group">
            <label class="col-md-2 control-label required" for="input-owner">Owner</label>
            <div class="col-md-7">
                <input id="input-owner" type="text" placeholder="Search by uuid, login or email" class="form-control " name="owner">
                <div class="help-block no-sshkeys-warning alert alert-warning">
                    Warning: This user does not have any SSH Keys.
                </div>
                <div class="user-preview-region"></div>
            </div>
        </div>


        <div class="form-group">
            <label class="col-md-2 control-label" for="input-alias">Name / Alias</label>
            <div class="col-md-7">
                <input id="input-alias" name="alias"
                placeholder="name as it appears to the customer"
                type="text" class="form-control ">
            </div>
        </div>

        <div class="form-group">
            <label class="col-md-2 control-label required">Package</label>
            <div class="col-md-7">
                <div class="chosen">
                    <select name="package" data-placeholder="Select a Package"></select>
                </div>
                <div class="package-preview-container"></div>
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-md-2 required">Image</label>
            <div class="col-md-7">
                <input id="input-image" type="text" placeholder="Enter UUID, or filter images by name, tag:<key>:value"
                class="form-control" name="image">
                <div class="checkbox">
                    <label><input class="delegate-dataset" name="delegate_dataset" type="checkbox"> Delegate Dataset</label>
                </div>
            </div>
        </div>

        <div class="form-group form-group-brand">
            <label class="control-label col-md-2 required">Brand</label>
            <div class="col-md-7">
                <select class="form-control" name="brand">
                    <option value="joyent">joyent</option>
                    <option value="joyent-minimal">joyent-minimal</option>
                    <option value="kvm">kvm</option>
                    <option value="bhyve">bhyve</option>
                    <option value="lx">lx</option>
                    <option value="sngl">sngl</option>
                </select>
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-md-2">Server</label>
            <div class="col-md-7">
                <span id="input-server"></span>
                <span class="help-block">Server to provision machine to (optional)</span>
            </div>
        </div>

        <div class="form-group form-group-networks">
            <label class="control-label col-md-2 required">Network Interfaces</label>
            <div class="col-md-10">
                <div class="network-selection"></div>
            </div>
        </div>

        <div class="form-group form-group-customer-metadata">
            <label class="control-label col-md-2">Customer Meta-data</label>
            <div class="col-md-4">
                <a class="btn btn-default btn-sm configure-metadata"><i class="fa fa-pencil"></i> Configure Customer Metadata</a>
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2">
                <button type="submit" class="btn btn-primary">Provision Machine</button>
                <button type="button" class="btn btn-link back">Back to Virtual Machines</button>
            </div>
        </div>
    </div>
</form>
</div>
